<template>
    <div>
        <div id="map"></div>
        <a-tabs defaultActiveKey="1" id="control" >
            <a-tab-pane tab="城市道路" key="1">
                <a-checkbox @change="main">城市主干道</a-checkbox>
                <a-checkbox @change="sub">城市次干道</a-checkbox>
                <a-checkbox @change="branch">城市支路</a-checkbox>
                <a-checkbox @change="blank">空白</a-checkbox>
                <!-- <a-checkbox @change="updateShilong">新增</a-checkbox>
                <a-checkbox @change="deleteShilong">删除</a-checkbox> -->
                <a-input-search @search="search"/>
            </a-tab-pane>
            <a-tab-pane tab="建筑规划" key="2">
                <a-checkbox @change="school">学校</a-checkbox>
                <a-checkbox @change='hospital'>医院</a-checkbox>
                <a-checkbox @change='shop'>商业用地</a-checkbox>
                <a-checkbox @change='house'>住宅区</a-checkbox>
            </a-tab-pane>
            <a-tab-pane tab="交通设备" key="3">
                <a-checkbox @change="pass">卡口</a-checkbox>
                <a-checkbox @change="tra">红绿灯</a-checkbox>
            </a-tab-pane>
            <a-tab-pane tab="公共交通" key="4">
                <a-checkbox @change="route">公交线路</a-checkbox>
                <a-checkbox @change="station">公交站点</a-checkbox>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import { importAMap,point,polyline,ALine,polygon,change,polygonArr,trafficSignal,passports,busRoutes,busStation } from '../utils/map'
import boundary from '../static/shilong/boundary'
import SLRoad from '../static/shilong/SLRoadUpdate'
import buildData from '../static/shilong/build'
import { school } from '../static/shilong/data'
import passport from '../static/shilong/passports'
import traffic from '../static/shilong/trafficSignals'
import busRoute from '../static/shilong/busRoutes'
import busRouteTest from '../static/shilong/busRouteTest'
import stationTest from '../static/shilong/stationTest'
// import UpdateData from '../static/shilongUpdate'
// import DeleteData from '../static/shilongDelete'

export default {
    data() {
        return {
            map:null,
            road:null,
            roadData:{
                main:[],
                sub:[],
                branch:[],
                blank:[],
                search:[],
                roadId: [],
                idToRoad: []
            },
            build:{
                school:[],
                hospital:[],
                shop:[],
                house:[]
            },
            traffic:{
                passport:[],
                signal:[],
            },
            bus:{
                busRouteArr:[],
                busRoute:[],
                busStation:[]
            },
            test1:[],
            test2:[],
            updateData:[],
            deleteData:[]
        }
    },
    created(){
        // 道路路段数据预处理
        this.road = SLRoad
        SLRoad.forEach(item => {
            switch(item.RoadLevel){
                case "main":
                    this.roadData.main.push(item);
                    break;
                case "sub":
                    this.roadData.sub.push(item);
                    break;
                case "branch":
                    this.roadData.branch.push(item);
                    break;
                default:
                    this.roadData.blank.push(item);
                    break;
            }
            if(this.roadData.roadId.indexOf(item.ID) !== -1){
                this.roadData.idToRoad.push(item)
            }
        });
        // 建筑数据预处理
        buildData.forEach(item => {
            switch(item.type){
                case "学校":
                    this.build.school.push(item);
                    break;
                case "医院":
                    this.build.hospital.push(item);
                    break;
                case "住宅区":
                    this.build.house.push(item);
                    break;
                case "商业中心":
                    this.build.shop.push(item);
                    break;
            }
        });
        // 公交数据预处理
        busRouteTest.forEach(item =>{
            item.stations.forEach(sub =>{
                this.bus.busRouteArr.push([sub.lng,sub.lat])
            })
        })

    },
    mounted() {
        importAMap().then(()=>{
            this.map = new AMap.Map('map',{
                resizeEnable: true,//是否监控地图容器尺寸变化
                zoom:14,  //级别
                center: [113.8592916,23.1088972],//中心点坐标
                showIndoorMap: false,
                // features: ['bg', 'road', 'building']
            })
            
            // 石龙边界
            let shilong = polygon(boundary.geometry.coordinates[0][0]);
            this.map.add(shilong);
            this.map.setFitView([ shilong ]);

            // 道路路段数据
            this.roadData.main = ALine(this.roadData.main,'black');
            this.roadData.sub = ALine(this.roadData.sub,'red');
            this.roadData.branch = ALine(this.roadData.branch,'blue');
            this.roadData.blank = ALine(this.roadData.blank,'orange');
            this.roadData.idToRoad = ALine(this.roadData.idToRoad,'red');
            this.map.add(this.roadData.idToRoad)
            // this.updateData = ALine(UpdateData,'red')
            // this.deleteData = ALine(DeleteData,'blue')

            // 建筑规划
            this.build.school = polygonArr(this.build.school,'skyblue')
            this.build.hospital = polygonArr(this.build.hospital,'red')
            this.build.shop = polygonArr(this.build.shop,'green')
            this.build.house = polygonArr(this.build.house,'yellow')

            // 交通设备
            this.traffic.passport = passports(this.map,passport)
            this.traffic.signal = trafficSignal(this.map,traffic)

            // 公共交通
            // stationTest.forEach(item=>{
            //     let point = new AMap.Marker({
            //         position:[item.SLON,item.SLAT],
            //         icon:new AMap.Icon({
            //             image:'https://a.amap.com/jsapi_demos/static/resource/img/pin.png',
            //             size:new AMap.Size(32,32),
            //             imageSize:new AMap.Size(32,32)
            //         }),
            //         offset:new AMap.Pixel(-16,-32),
            //         title:item.ID + ":" + item.SNAME
            //     })
            //     this.bus.busStation.push(point)
            // })
            
            let { markerArr, lnglatArr } = busStation(busRouteTest)
            this.bus.busRoute = lnglatArr
            // 测试
            this.bus.busStation = markerArr
            // 全部数据
            // this.bus.busStation = busStation(busRoute)

            // new Promise(resolve => {
            //     AMap.convertFrom(this.bus.busRouteArr,"gps",(status,result)=>{
            //         if(result.info === 'ok'){
            //             resolve(result.locations)
            //         }
            //     })
            // }).then(res => {
            //     let start = []
            //     let end = []
            //     let pass1 = []
            //     let pass2 = []
            //     for(var i=0;i<res.length;i++){
            //         if(i==0){
            //             start.push([res[i].lng,res[i].lat])
            //         }else if(i>0 && i<16){
            //             pass1.push([res[i].lng,res[i].lat])
            //         }else if(i==16){
            //             end.push([res[i].lng,res[i].lat])
            //             start.push([res[i].lng,res[i].lat])
            //         }else if(i>16&&i<res.length-1){
            //             pass2.push([res[i].lng,res[i].lat])
            //         }else{
            //             end.push([res[i].lng,res[i].lat])
            //         }
            //     }
            //     this.map.plugin("AMap.Driving",()=>{
            //         let route1 = new AMap.Driving({
            //             policy: AMap.DrivingPolicy.LEAST_TIME,
            //             map:this.map,
            //             showTraffic:false,
            //             // hideMarkers:true,
            //         })
            //         let route2 = new AMap.Driving({
            //             policy: AMap.DrivingPolicy.LEAST_TIME,
            //             map:this.map,
            //             showTraffic:false,
            //             // hideMarkers:true,
            //         })
            //         route1.search(start[0],end[0],{waypoints:pass1})
            //         route2.search(start[1],end[1],{waypoints:pass2})
            //     })
            // })
            
        })
    },
    methods:{
        // 道路
        main(e){
            if(e.target.checked){
                this.map.add(this.roadData.main)
            }else{
                this.map.remove(this.roadData.main)
            }
        },
        sub(e){
            if(e.target.checked){
                this.map.add(this.roadData.sub)
            }else{
                this.map.remove(this.roadData.sub)
            }
        },
        branch(e){
            if(e.target.checked){
                this.map.add(this.roadData.branch)
            }else{
                this.map.remove(this.roadData.branch)
            }
        },
        blank(e){
            if(e.target.checked){
                this.map.add(this.roadData.blank)
            }else{
                this.map.remove(this.roadData.blank)
            }
        },
        // updateShilong(e){
        //     if(e.target.checked){
        //         this.map.add(this.updateData)
        //     }else{
        //         this.map.remove(this.updateData)
        //     }
        // },
        // deleteShilong(e){
        //     if(e.target.checked){
        //         this.map.add(this.deleteData)
        //     }else{
        //         this.map.remove(this.deleteData)
        //     }
        // },
        search(value){
            let roadArr = []
            let snodeArr = []
            let enodeArr = []
            this.map.remove(this.roadData.search);
            this.roadData.search = []
            this.road.forEach(item=>{
                if(item.RoadName==value){
                    roadArr.push(item)
                }
            })
            if(roadArr.length!=0){
                roadArr.forEach(item=>{
                    let path = change(item.coordinates)
                    // 创建折线实例
                    let polyline = new AMap.Polyline({
                        path: path,
                        strokeColor:"skyblue" , // 线条颜色
                    });
                    polyline.info = new AMap.InfoWindow({
                        content: item.RoadName,
                        offset: new AMap.Pixel(0, -30)
                    });
                    this.roadData.search.push(polyline);
                    let Scodtion = roadArr.every(sub=>{
                        return item.SnodeID!=sub.EnodeID
                    })
                    if(Scodtion){
                        let marker = new AMap.Marker({
                            position:change(item.coordinates)[0],
                            icon:"http://wei8ba.gitee.io/libphoto/shilong/origin.png",
                            title:item.ID + ":" + change(item.coordinates)[0],
                            extData:item.ID
                        })
                        marker.info = new AMap.InfoWindow({
                            content: item.ID + ":" + change(item.coordinates)[0],
                            offset: new AMap.Pixel(0, -30)
                        });
                        snodeArr.push(marker)
                    }
                    let Ecodtion = roadArr.every(sub=>{
                        return item.EnodeID!=sub.SnodeID
                    })
                    if(Ecodtion){
                        let last = change(item.coordinates).length-1
                        let Emarker = new AMap.Marker({
                            position:change(item.coordinates)[last],
                            icon:"http://wei8ba.gitee.io/libphoto/shilong/end.png",
                            title:item.ID + ":" + change(item.coordinates)[last],
                            extData:item.ID
                        })
                        Emarker.info = new AMap.InfoWindow({
                            content: item.ID + ":" + change(item.coordinates)[last],
                            offset: new AMap.Pixel(0, -30)
                        });
                        enodeArr.push(Emarker)
                    }
                })
                this.map.add(this.roadData.search);
                this.map.setFitView(this.roadData.search);

                let markerLayer = new AMap.OverlayGroup([snodeArr,enodeArr]);
                this.map.add(markerLayer);
                markerLayer.on("click",(event)=>{
                    let { lng,lat }= event.target.getPosition()
                    this.map.setCenter(event.target.getPosition())
                    event.target.info.open(this.map, event.target.getPosition())
                    // console.log(event.target.getTitle())
                })
                this.roadData.search.push(markerLayer)
            }else{
                this.$message.error('未找到该路段');
            }
        },
        // 建筑
        school(e){
            if(e.target.checked){
                this.map.add(this.build.school)
            }else{
                this.map.remove(this.build.school)
            }
        },
        hospital(e){
            if(e.target.checked){
                this.map.add(this.build.hospital)
            }else{
                this.map.remove(this.build.hospital)
            }
        },
        shop(e){
            if(e.target.checked){
                this.map.add(this.build.shop)
            }else{
                this.map.remove(this.build.shop)
            }
        },
        house(e){
            if(e.target.checked){
                this.map.add(this.build.house)
            }else{
                this.map.remove(this.build.house)
            }
        },
        // 设备
        pass(e){
            if(e.target.checked){
                this.map.add(this.traffic.passport)
            }else{
                this.map.remove(this.traffic.passport)
            }
        },
        tra(e){
            if(e.target.checked){
                this.map.add(this.traffic.signal)
            }else{
                this.map.remove(this.traffic.signal)
            }
        },
        // 公共
        route(e){
            if(e.target.checked){
                let rotue = busRoutes(this.map,this.bus.busRoute)
                // this.map.add(this.bus.busRoute)
            }else{
                // this.map.remove(this.bus.busRoute)
            }
        },
        station(e){
            if(e.target.checked){
                this.map.add(this.bus.busStation)
            }else{
                this.map.remove(this.bus.busStation)
            }
        },
        get(){
            console.log(this.map.getAllOverlays()) 
        }
    }
}
</script>

<style lang="scss" scoped>
#map{
    widows: 100vw;
    height: 100vh;
}
#control{
    position: absolute;
    top: 0;
    left: 0;
    padding-bottom:10px; 
    width: 500px;
    background-color: white;
}
</style>
